<template>
  <div class="billGetMoney">
    <div class="form">
      <div class="form-item">
        <CustomWrapInput
          v-model="formItem.realTotalMoney"
          inputType="number"
          title="实收金额"
          placeholder="请填写实收金额" />
      </div>

      <div class="form-item">
        <picker
          :range="moneyTypeData"
          :value="moneyType"
          @change="moneyTypeChange">
          <CustomWrapInput
            title="支付方式"
            placeholder="请选择支付方式"
            :isInput="false"
            :value="formItem.getMoneyType" />
        </picker>
      </div>
    </div>

    <div class="sure clear">
      <button class="button pull-right" @tap="buttonClick">确定</button>
    </div>
  </div>
</template>

<script>
import CustomWrapInput from 'components/CustomWrapInput/CustomWrapInput'
import { mapState } from 'vuex'
import { ERR_OK } from 'api/config'
import { getMoney } from 'api/billGetMoney'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    CustomWrapInput
  },
  computed: {
    ...mapState({
      currentItem: state => state.billGetMoney.currentItem
    })
  },
  data () {
    return {
      formItem: {
        realTotalMoney: 0,
        getMoneyType: '现金'
      },
      moneyType: '0',
      moneyTypeData: ['现金', '银行卡转账', '微信支付', '支付宝支付']
    }
  },
  methods: {
    moneyTypeChange (e) {
      this.moneyType = e.target.value
      this.formItem.getMoneyType = this.moneyTypeData[this.moneyType]
    },
    buttonClick () {
      const obj = JSON.parse(JSON.stringify(this.formItem))

      obj.id = this.currentItem.id

      this.getMoney(obj)
    },
    async getMoney (data) {
      this.$showLoading('收取中')

      const res = await getMoney(data)

      this.$hideLoading()

      if (res.code === ERR_OK) {
        this.$showToast({
          title: '收取成功',
          success: () => {
            wx.navigateBack()
          }
        })
      } else {
        this.$showToast({
          title: (res && res.msg) || '收取失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~common/scss/color';

  .billGetMoney {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    // background-color: rgb(248, 248, 248);
    > .form {
      > .form-item {
        border-bottom: 1px solid rgb(238, 238, 238);
      }
    }
    > .sure {
      margin-top: 15px;
      margin-right: 15px;
      > .button {
        width: 100px;
        background-color: $color-default;
        border-radius: 10px;
        color: white;
        font-size: 16px;
      }
    }
  }
</style>
